<template>
  <div class="browseDetails">
    <el-card shadow="hover">
      <div class="searchBox">
        <div>
          <h3>总浏览时长与人数分布</h3>
        </div>
        <div>
          <!-- <el-date-picker
            v-model="browseTimeVal"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="browseOptions"
            value-format="yyyy-MM-dd"
            @change="focus"
          >
          </el-date-picker>
          <el-button class="btn" icon="el-icon-search" @click="browseBtn"
            >查询搜索</el-button
          > -->
          <el-radio-group v-model="type" fill="#39383D" @change="pin">
            <el-radio-button label="1">今日</el-radio-button>
            <el-radio-button label="2">总计</el-radio-button>
          </el-radio-group>
          <el-button class="btn" icon="el-icon-download" @click="exportExcelA"
            >导出Excel</el-button
          >
        </div>
      </div>
      <div id="myChartA" :style="{ width: '100%', height: '500px' }"></div>

      <!-- 日平均浏览时长分布 -->
      <div class="searchBox averageBox">
        <div>
          <h3>日平均浏览时长分布</h3>
        </div>
        <div>
          <el-date-picker
            v-model="averageTimeVal"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="averageOptions"
            value-format="yyyy-MM-dd"
            @change="focus"
          >
          </el-date-picker>
          <el-button class="btn" icon="el-icon-search" @click="averageBtn"
            >查询搜索</el-button
          >
          <el-button class="btn" icon="el-icon-download" @click="exportExcelB"
            >导出Excel</el-button
          >
        </div>
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="日期"> </el-table-column>
        <el-table-column prop="online" label="平均在线时长(s)">
        </el-table-column>
        <el-table-column prop="browse" label="平均浏览时长(s)">
        </el-table-column>
        <el-table-column prop="matching" label="平均浏览匹配时长(s)">
        </el-table-column>
        <!-- <el-table-column prop="circle" label="平均浏览圈子时长(s)">
        </el-table-column> -->
        <el-table-column prop="idea" label="平均浏览想法时长(s)">
        </el-table-column>
        <el-table-column prop="message" label="平均浏览消息时长(s)">
        </el-table-column>
        <el-table-column prop="mine" label="平均浏览我的时长(s)">
        </el-table-column>
        <el-table-column prop="others" label="平均浏览他人时长(s)">
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="page"
        :limit.sync="pageSize"
        @pagination="getList"
        :autoScroll="false"
      />
    </el-card>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // 分页
import { browseData, browseAverageTime } from "@/api/DataAnalysis";
export default {
  components: { Pagination },
  inject: ["reload"],
  data() {
    return {
      type: "1",
      //总浏览时长与人数分布
      browseOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      browseTimeValStartDate: "",
      browseTimeValEndDate: "",
      browseTimeVal: "", //想法分析时间

      //日均时间
      averageOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      averageTimeValStartDate: "",
      averageTimeValEndDate: "",
      averageTimeVal: "", //想法分析时间
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      total: 0,
      page: 1, //页码
      pageSize: 10, //每页条数
    };
  },
  methods: {
    //浏览详情查询搜索
    browseBtn() {},
    //总浏览时长与人数分布时间
    focus(time) {
      if (!this.browseTimeVal) {
        this.browseTimeVal = [];
      }
      this.browseTimeValStartDate = this.browseTimeVal[0];
      this.browseTimeValEndDate = this.browseTimeVal[1];
    },
    async pin() {
      const res = await browseData({
        type: this.type,
      });
      // 基于准备好的dom，初始化echarts实例
      let myChartA = this.$echarts.init(document.getElementById("myChartA"));
      // 绘制图表
      myChartA.setOption({
        color: ["#59b2ef", "#ffba81"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          data: ["时长", "人数总计"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
        },
        yAxis: {
          type: "category",
          data: res.data.title,
        },
        series: [
          {
            name: "时长",
            type: "bar",
            data: res.data.time,
          },
          {
            name: "人数总计",
            type: "bar",
            data: res.data.person,
          },
        ],
      });
    },
    //日均查询
    averageBtn() {
      this.page = 1;
      this.getList();
    },
    //日均分页
    getList() {
      browseAverageTime({
        page: this.page,
        pageSize: this.pageSize,
        startTime: this.averageTimeValStartDate,
        endTime: this.averageTimeValEndDate,
      }).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data.list;
          this.total = res.data.total;
        }
      });
    },
    //日均时间
    focus(time) {
      if (!this.averageTimeVal) {
        this.averageTimeVal = [];
      }
      this.averageTimeValStartDate = this.averageTimeVal[0];
      this.averageTimeValEndDate = this.averageTimeVal[1];
    },
    exportExcelA() {
      require.ensure([], async () => {
        const res = await browseData({
          type: this.type,
        });
        const tHeader = ["页面", "时长", "人数总计"];
        let data = [];
        res.data.title.forEach((item, index) => {
          let arr = [];
          arr.push(item);
          arr.push(res.data.time[index]);
          arr.push(res.data.person[index]);
          data.push(arr);
        });
        const { export_json_to_excel } = require("@/excel/Export2Excel");
        export_json_to_excel(tHeader, data, "总浏览时长与人数");
      });
    },
    async exportExcelB() {
      if (!this.averageTimeValStartDate || !this.averageTimeValEndDate) {
        this.$message({
          type: "error",
          message: "请选择时间范围",
        });
        return;
      }
      const res = await browseAverageTime({
        page: 1,
        pageSize: 1000,
        startTime: this.averageTimeValStartDate,
        endTime: this.averageTimeValEndDate,
      });
      require.ensure([], () => {
        const { export_json_to_excel } = require("@/excel/Export2Excel"); //注意这个Export2Excel路径
        const tHeader = [
          "日期",
          "平均在线时长(s)",
          "平均浏览时长(s)",
          "平均浏览匹配时长(s)",
          "平均浏览想法时长(s)",
          "平均浏览消息时长(s)",
          "平均浏览我的时长(s)",
          "平均浏览他人时长(s)",
        ]; // 上面设置Excel的表格第一行的标题
        const filterVal = [
          "date",
          "online",
          "browse",
          "matching",
          "idea",
          "message",
          "mine",
          "others",
        ]; // 上面的index、nickName、name是tableData里对象的属性key值
        const list = res.data.list; //把要导出的数据tableData存到list
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, "日平均浏览时长分布"); //最后一个是表名字
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
  },
  created() {
    this.getList();
  },
  mounted() {
    this.pin();
  },
};
</script>

<style lang="less" scoped>
.browseDetails {
  margin: 30px;
  height: 100%;
  .searchBox {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
  }
  .averageBox {
    margin-top: 40px;
  }
}
</style>